<template>
    <Page
        show-total
        show-elevator
        :show-sizer="showSizer"
        :current.sync="curPage"
        :page-size="pageSize"
        :total="total"
        @on-change="changePage"
        @on-page-size-change="changePageSize"
        :page-size-opts="pageSizeOptions"
        transfer
    />
</template>
<script>
    export default {
        name:'MyPage',
        props:{
            current: {
                type: Number,
                default: 1
            },
            pageSize: {
                type: Number,
                default: 10
            },
            total: {
                type: Number,
                default: 0
            },
        },
        data(){
            return {
                pageSizeOptions:[10,20],
                curPage: this.page || 1,
                curSize: this.pageSize  || 10
            }
        },
        watch:{
            current(val) {
                this.curPage = val;
            }
        },
        computed:{
            showSizer(){
                return !!this._events['update:pageSize'] || !!this._events['on-page-size-change']
            }
        },
        mounted(){
            console.log(this)
        },
        methods:{
            changePage(page) {
                if(this.isChangeSize){
                    this.isChangeSize = false;
                    return
                }
                this.curPage = page;
                this.$emit('update:current', page); 
                if(this._events['queryFun']){
                    this.$emit('queryFun');
                }else{
                    this.$emit('on-change', page);
                }
            },
            changePageSize(size) {
                this.curSize = size;
                this.$emit('update:pageSize', size);
                let curPage = this.curPage;
                if(curPage !== 1){
                    this.isChangeSize = true;
                }
                if(this.total > 0){
                    let maxPage = Math.ceil(this.total / size)
                    if(maxPage < this.curPage){
                        curPage = maxPage
                    }
                }
                if(this._events['queryFun']){
                    setTimeout(() => {
                        this.curPage = curPage;
                        this.$emit('update:current',curPage); 
                        this.$emit('queryFun');
                    })
                }else{
                    this.$emit('update:current', curPage); 
                    this.$emit('on-page-size-change', size);
                }
            },
        }
    }
</script>
<style scoped>

</style>